setTimeout(function () {
    const MIN_WIDTH=560,MAX_WIDTH=650;
    var imgbox = document.querySelector("#J_sliderView");
    var zoom = document.querySelector(".zoom")
    var mask=document.querySelector(".mask")
    var maskWidth=parseInt(getComputedStyle(mask).width);
    console.log(maskWidth)
    // mask.style.width=maskWidth+"px"
    // mask.style.height=maskWidth+"px"
    var rect=imgbox.getBoundingClientRect();
   
    var x=0,y=0
    imgbox.addEventListener("mouseenter", function (e) {
        zoom.style.display = "block"
        mask.style.display="block"  
        // console.log(src)
        var src=document.querySelector(".good_dec").getAttribute("src")
        zoom.style.background=`url("${src}") no-repeat`
 
    })
    imgbox.addEventListener("mouseleave", function (e) {
        zoom.style.display = "none"
        mask.style.display="none"
    })
   
    imgbox.addEventListener("mousemove",function(e){
       
        x=e.x-rect.x-maskWidth/2;
        y=e.y-rect.y-maskWidth/2;
        if(x<0) x=0;
        if(x>MIN_WIDTH-maskWidth) x=MIN_WIDTH-maskWidth;
        if(y<0) y=0;
        if(y>MIN_WIDTH-maskWidth) y=MIN_WIDTH-maskWidth;
        mask.style.left=x+"px";
        mask.style.top=y+"px";
        // console.log(e.x)
        var scale=MAX_WIDTH/maskWidth;
        zoom.style.backgroundPositionX=-x*scale+"px";
         zoom.style.backgroundPositionY=-y*scale+"px";


    })
}, 200)
